<template>
  <div class="random-shot-list">
    <c-title text="随手拍"></c-title>
    <div class="box" v-for="item in list" @click="goto(item.id.value)">
      <div class="between">
        <span class="id">ID:{{ item.id.value }}</span>
        <div class="detail">查看详情<van-icon name="arrow" /></div>
      </div>
      <div class="line"></div>
      <div class="flex">
        <span class="flex-shrink">已提交表单：</span>
        <span class="c-6E6E79">{{ item.submit_form.value }}</span>
      </div>
      <div class="flex" style="margin: 0.8125rem 0;">
        <span class="flex-shrink">提交时间：</span>
        <span class="c-6E6E79">{{ item.submit_datetime.value }}</span>
      </div>
      <div class="flex" style="align-items: flex-start;">
        <span class="flex-shrink">回复状态：</span>
        <span class="c-6E6E79" style="text-align: left;">{{ item.reply.value }}</span>
      </div>
      <div class="flex" style="align-items: flex-start;" v-if="item.reply_content">
        <span class="flex-shrink">回复内容：</span>
        <span class="c-6E6E79" style="text-align: left;">{{ item.reply_content.value }}</span>
      </div>
      <div class="flex" style="margin: 0.8125rem 0;" v-if="item.reply_datetime">
        <span>回复时间：</span>
        <span class="c-6E6E79">{{ item.reply_datetime.value }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { scrollMixin } from "../../../utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      list: [],
      isLoadMore: true,
      page: 1,
      total_page: 1,
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    goto(form_id) {
      this.$router.push(this.fun.getUrl('random_shot_details', { form_id }))
    },
    getData(page = 1) {
      $http.get("plugin.shoot-casually.frontend.form-member.index", { page }, "").then(({ result, msg, data }) => {
        this.isLoadMore = true;
        if (result) {
          this.page = data.current_page;
          this.total_page = data.last_page;
          (page == 1) ? (this.list = data.data) : (this.list = this.list.concat(data.data))
        } else {
          this.$toast(msg);
        }
      })
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      }
      let page = this.page + 1;
      this.getData(page);
    },
  }
};
</script>

<style scoped lang="scss">
.random-shot-list {
  padding: 0.625rem 0.75rem;

  .between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .c-6E6E79 {
    color: #6E6E79;
  }

  .flex {
    display: flex;
    align-items: center;
  }

  .line {
    margin: 1rem auto;
    height: 1px;
    background: #F0F0F1;
  }

  .flex-shrink {
    flex-shrink: 0;
  }

  .box {
    background: #FFFFFF;
    border-radius: 0.5rem;
    padding: 0.9688rem 0.75rem 1.125rem;
    margin-bottom: .625rem;
  }

  .detail {
    color: #6E6E79;
    font-size: 0.875rem;
  }

  .id {
    color: #282828;
    font-weight: bold;
    font-size: 1rem;
  }
}</style>
